<template>
  <div class="body">
    <div class="tow">
      <div class="login" :class="{ active: form.now == 1 }">
        <div>
          <img class="iamg" src="../assets/rs.jpg" alt="" />
        </div>
        <div>
          <img src="../assets/ms.jpg" alt="" />
        </div>
      </div>
      <div class="res" :class="{ active: form.now == 1 }">
        <!-- 登录 -->
        <el-form :model="form" :rules="rule" ref="f2" class="card dl">
          <h2>欢迎登录</h2>
          <el-form-item prop="uphone">
            <el-input type="text" v-model="form.uphone" placeholder="请输入手机"></el-input>
          </el-form-item>
          <el-form-item prop="upwd">
            <el-input type="password" v-model="form.upwd" placeholder="密码"></el-input>
          </el-form-item>
          <el-button id="btn" @click="goData()" style="cursor: pointer">登录</el-button>
          <el-checkbox-group class="checkbox" v-model="form.ruleForm">
            <el-checkbox name="type">自动登录</el-checkbox>
          </el-checkbox-group>
          <span style="font-size: 12px; color: #555">没有注册？</span>
          <span style="
              color: #677eff;
              font-weight: 600;
              cursor: pointer;
              font-size: 12px;
            " @click="form.now = 1">点击注册</span>
          <p>
            <router-link to="">忘记密码？</router-link>
          </p>
        </el-form>
        <!-- 注册 -->
        <el-form :model="forms" :rules="rules" ref="f1" class="card f2">
          <h2>欢迎注册</h2>
          <!-- 手机号 -->
          <el-form-item prop="phone">
            <el-input type="text" v-model="forms.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <!-- 验证码 -->
          <div class="sun">
            <el-form-item class="yz" prop="yz">
              <el-input type="text" v-model="forms.yz" placeholder="验证码"></el-input>
              <!-- <el-button id="btn">获取验证码</el-button> -->
            </el-form-item>
            <span @click="refreshCode" style="cursor: pointer">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </span>
          </div>
          <!-- 密码 -->
          <div class="upwd">
            <el-form-item prop="pwd" class="pwd">
              <el-input type="password" v-model="forms.pwd" placeholder="密码,8-16位非单类字符">
              </el-input>
              <!-- <img class="icon" src="../assets/eey.svg" alt="" /> -->
            </el-form-item>
            <el-form-item class="pwd" prop="repwd">
              <el-input type="password" v-model="forms.repwd" placeholder="确认密码"></el-input>
            </el-form-item>
          </div>
          <!-- 登陆昵称 -->
          <el-form-item prop="name">
            <el-input type="text" v-model="forms.name" placeholder="登录昵称"></el-input>
          </el-form-item>
          <!-- 城市 -->
          <div class="chengs">
            <el-form-item prop="sfen">
              <el-cascader class="sfen" :options="forms.options" :show-all-levels="false" v-model="forms.sfen">
              </el-cascader>
            </el-form-item>
            <el-form-item prop="chengs">
              <el-input type="text" v-model="forms.chengs" placeholder="城市"></el-input>
            </el-form-item>
          </div>
          <!-- 勾选用户协议 -->
          <el-form-item class="check">
            <el-checkbox-group class="checkbox" v-model="forms.register">
              <el-checkbox name="type">我已仔细阅读并同意《用户协议》</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button :class="{ disables: !forms.register }" id="btn" @click="onSubmit()" style="cursor: pointer">注册
            </el-button>
          </el-form-item>
          <span style="font-size: 12px; color: #555">已有账号？</span>
          <span style="
              color: #677eff;
              font-weight: 600;
              cursor: pointer;
              font-size: 12px;
            " @click="form.now = 0">点击登录</span>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import SIdentify from "@/components/identify";
export default {
  components: { SIdentify },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
        // } else {
        //   if (this.form.pwd.length >= 6 && this.form.pwd.length <= 14) {
        //     callback();
        //   } else {
        //     callback(new Error("密码长度6-14位"));
        //   }
      } else if (
        !/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(value)
      ) {
        callback(new Error("含大小写字母及数字不低于8位"));
      }
      callback();
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.forms.pwd) {
        console.log(value);
        callback(new Error("两次输入密码不一致!"));
      } else {
        // console.log(value);
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (/^(?:(?:\+|00)86)?1\d{10}$/.test(value)) {
        callback();
      } else {
        callback(new Error("手机号有误"));
      }
    };
    var validateYz = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入验证码"));
      } else if (value.toUpperCase() !== this.identifyCode.toUpperCase()) {
        callback(new Error("验证码错误，请重试"));
      } else {
        callback();
      }
    };
    return {
      // 图片验证码
      identifyCode: "",
      // 验证码规则
      identifyCodes: "3456789ABCDEFGHGKMNPQRSTUVWXY",
      form: {
        uphone: "",
        upwd: "",
        ruleForm: false,
        now: 0,
      },
      rule: {
        uphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: validatePhone,
            trigger: "blur",
          },
        ],
      },
      forms: {
        phone: "",
        pwd: "",
        repwd: "",
        name: "",
        yz: "",
        sfen: "",
        chengs: "",
        register: false,
        options: [
          { value: "河南", label: "河南" },
          { value: "sichuan", label: "四川" },
          {
            value: "北京",
            label: "北京",
          },
          {
            value: "shanghai",
            label: "上海",
          },
          {
            value: "tianjin",
            label: "天津",
          },
          {
            value: "guangdong",
            label: "广东",
          },
          {
            value: "shandong",
            label: "山东",
          },
          {
            value: "guangxi",
            label: "广西",
          },
          {
            value: "shanxi",
            label: "山西",
          },
          {
            value: "chongqing",
            label: "重庆",
          },
        ],
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: validatePhone,
            trigger: "blur",
          },
        ],
        pwd: [{ validator: validatePass, trigger: "blur" }],
        yz: [{ validator: validateYz, trigger: "blur" }],
        repwd: [{ validator: validatePass2, trigger: "blur" }],
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 1,
            max: 5,
            message: "长度在 1 到 5 个字符 支持中英数字",
            trigger: "blur",
          },
        ],
        sfen: [{ required: true, message: "请选择省份", trigger: "change" }],
        chengs: [
          { required: true, message: "请输入您所在的城市", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.refreshCode();
    if (localStorage.token) this.form.uphone = localStorage.token;
  },
  methods: {
    // 切换验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      // console.log(this.identifyCode);

      // localStorage.setItem("token", "");
      // this.$store.commit("updateUname", "");
    },
    // 生成随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[
          Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
          ];
      }
    },
    onSubmit() {
      this.$refs["f1"].validate((valid) => {
        // console.log(this.$refs["f1"]);
        if (valid) {
          // console.log(this.form);
          //发起注册
          // if ((this.name == "") & (this.phone == "")) {
          //   return
          // }else{}
          let params = `uname=${this.forms.name}&upwd=${this.forms.pwd
            }&uphone=${this.forms.phone}&uavtar=${null}&uprovince=${this.forms.sfen
            }&ucity=${this.forms.chengs}`;
          // console.log(this.forms.sfen);
          // console.log(params);
          let url = "users/register";
          this.axios.post(url, params).then((res) => {
            // console.log(res);
            if (res.data.code == 201) {
              alert("注册成功");
              this.form.now = 0;
            } else {
              alert("手机号已被注册");
            }
          });
        } else {
          alert("资料不全");
          // return false;
        }
      });
    },
    //登录
    goData() {
      this.$refs["f2"].validate((valid) => {
        if (valid) {
          let params = `uphone=${this.form.uphone}&upwd=${this.form.upwd}`;
          // console.log(this.form.uphone);
          let url = "users/login";
          this.axios.post(url, params).then((res) => {
            // console.log(res);
            // console.log(res.data.code);
            if (res.data.code == 404) {
              alert("该用户不存在，请检查手机号或密码");
            } else {
              alert("即将为您跳转到首页");
              localStorage.setItem("token", this.form.uphone);
              this.$router.push("/");
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/login.scss";
@import "../assets/css/reset.css";
</style>
<!-- <style scoped src="../assets/css/login.css"></style> -->
<!-- <style src="../assets/css/reset.css"></style> -->
